/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:10:53 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-06-14 14:38:39
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Layout } from 'antd';
import Rate from '@/components/Rate'; 
import './style.less';

export default class Supermarket extends Component {
    constructor(props){
        super(props)
        this.state = {
            type: ['云安全','基础设施安全','终端安全','应用安全','数据安全','身份与访问管理','移动安全','业务安全','安全智能','安全管理'],
            currentIndex: 0,
            list: [{
                url: require('@/static/images/super-1.jpg'),
                title: 'iWall应用防火墙',
                cs: '上海天存信息技术有限公司',
                tit: 'iWall应用防火墙（Web应用防护系统）是一款保护Web站点和应用免受来自于应用层攻击的Web防护设备。iWall应用防火墙全面分析应用层的用户http请求数据，区分正常用户访问Web应用和攻击者...',
                star: 5
            }, {
                url: require('@/static/images/super-2.jpg'),
                title: 'iGuard网页防篡改系统',
                cs: '上海天存信息技术有限公司',
                tit: 'iGuard网页防篡改系统（以下简称iGuard）是保护Web网站不被黑客篡改，并自动恢复被篡改内容的Web页面保护软件。iGuard支持Windows、Linux、Unix等各种主流操作系统，支持部署于各种虚拟化平台及云平台、docker（容器化...',
                star: 3
            }, {
                url: require('@/static/images/super-3.jpg'),
                title: 'iAudit应用行为审计系统',
                cs: '上海天存信息技术有限公司',
                tit: 'iAudit应用行为审计系统（以下简称iAudit）是一款通过采集对Web应用系统的所有访问，并根据预先构建的业务模型来解析和还原所有与应用系统相关的业务操作行为的安全审...',
                star: 2
            }, {
                url: require('@/static/images/super-9.jpg'),
                title: 'nSync文件同步系统',
                cs: '上海天存信息技术有限公司',
                tit: 'nSync 文件同步系统（ 以下简称nSync） 是一个多节点跨平台实时文件同步系统， 它实现了在本地集群及广域网环境下的跨平台服务器群之间的高效、可靠和自动的文件...',
                star: 5
            }, {
                url: require('@/static/images/super-4.jpg'),
                title: 'iFlow在线业务交互防护系统',
                cs: '上海天存信息技术有限公司',
                tit: 'iFlow在线业务交互防护系统采用天存ARCI安全模型来为每个Web应用系统“量身定做”满足自身安全需求的防护对策及实施方案，该模型以威胁与对策知识库作为重要的技术支撑，通过应用辨...',
                star: 1
            }, {
                url: require('@/static/images/super-5.jpg'),
                title: '深信服VPN网关VPN V6.0',
                cs: '深圳市深信服科技股份有限公司',
                tit: '北京神州绿盟科技有限公司（简称绿盟科技）是国内最早从事网络安全业务的企业之一，于2014年1月29日起在深圳证券交易所创业板上市交易，总部位于北京，现有员工1700余人，其中技术团队占比超过65%。在国内外...',
                star: 4
            }, {
                url: require('@/static/images/super-6.jpg'),
                title: '启明星辰万兆级别Web应用防火墙',
                cs: '启明星辰信息技术股份有限公司',
                tit: '启明星辰公司由留美博士严望佳女士于1996年创建，是国内较具实力的、拥有完全自主知识产权的网络安全产品、可信安全管理平台、安全服务与解决方案的综合提供商。2010年6月23日，启明星辰在深交所中小板正式挂牌上市。启明星辰拥...',
                star: 3
            }, {
                url: require('@/static/images/super-7.jpg'),
                title: '威胁情报驱动Web安全-绿盟WAF',
                cs: '北京神州绿盟科技有限公司',
                tit: '北京神州绿盟科技有限公司（简称绿盟科技）是国内最早从事网络安全业务的企业之一，于2014年1月29日起在深圳证券交易所创业板上市交易，总部位于北京，现有员工1700余人，其中技术团队占比超过65%。在国内外...',
                star: 2
            }, {
                url: require('@/static/images/super-8.jpg'),
                title: '东软NetEye防火墙',
                cs: '东软集团股份有限公司',
                tit: '东软面向全球市场提供IT驱动的创新型解决方案与服务，致力于推动社会的发展与变革，为个人创造新的生活方式，为社会创造价值。以软件技术为核心，东软为客户提供行业解决方案、智能互联产品、平台产品以及云与数据服务...',
                star: 5
            }]
        }
    }
    
    tabToggle(index){
        this.setState({
            currentIndex: index
        })
    }      

    render() {
        const { type, currentIndex, list } = this.state;
        return (
            <Layout.Content className="market">
                <div className="banner animated fadeIn">
                    <div className="search">
                        <input type="text" placeholder="请输入关键词" />
                        <button>
                            <i />搜索
                        </button>
                    </div>
                </div> 
                <div className="menu">
                    <ul>
                        {
                            type && type.map((item, index) => {
                                return (
                                    <li className={currentIndex===index ? 'active' : ''} onClick={this.tabToggle.bind(this, index)} key={index}>
                                        {item}
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="type">
                    <ul>
                        <li>
                            <em>所有产品：</em>
                            <div className="list">
                                <span>Web 应用防火墙</span>
                                <span>网页防篡改系统</span>
                                <span>Web 应用扫描与监控</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div className="list">
                    <ul>
                        {
                            list && list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <div className="img">
                                            <img src={item.url} alt=""/>
                                        </div>
                                        <h1>{item.title}</h1>
                                        <p>厂商：{item.cs}
                                        </p>
                                        <Rate value={item.star} />
                                        <p className="tit">{item.tit}</p>
                                        <div className="select">
                                            <Link to="/supermarket/1">立即查看</Link>
                                            <span className="fr">534人阅览</span>
                                            <span className="fr">1203人收藏</span>
                                        </div>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </Layout.Content>
        );
    }
}